<template>
<div>
    <el-button class="back-arrow-button" @click="goBack">
        <i class="el-icon-arrow-left"></i> Back
    </el-button>
</div>
</template>

  
<script>
export default {
    name: 'backButton',
    methods: {
        goBack() {
            // 这里可以定义返回的逻辑，例如：
            this.$router.go(-1); // 假设你使用的是 Vue Router
        }
    }
}
</script>

  
<style scoped>
.back-arrow-button {
    background-color: #409EFF;
    /* ElementUI primary color */
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    outline: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.back-arrow-button:hover {
    background-color: #66b1ff;
    /* Darker shade for hover state */
}

.back-arrow-button i {
    margin-right: 8px;
    /* Space between icon and text */
}
</style>
